<!--项目启动--项目立项-->
<template>
  <div style="background: #f5f5f5">
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">立项申报</div>
      </div>
      <div class="card-row-container" @click="showModalPage">
        <div class="left-icon bg-blue"><i class="el-icon-document" style="font-size: 28px;color: #FFF;"></i></div>
        <div class="rightTitle">
          <div class="mainTitle">项目立项</div>
          <div class="subTitle">完善意向项目基本信息、合同信息和项目组成员发起审批流程。</div>
        </div>
      </div>
    </div>
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">申报记录</div>
        <div>更多</div>
      </div>
      <div class="card-table">
        <el-table :data="tableData" border style="width: 100%;" @row-click="handleRowClick">
          <el-table-column prop="date" label="申请日期" width="120"></el-table-column>
          <el-table-column prop="entryName" label="项目名称"></el-table-column>
          <el-table-column prop="entryNumber" label="项目编号" width="150"></el-table-column>
          <el-table-column prop="entryType" label="项目类型"></el-table-column>
          <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
          <el-table-column prop="startTime" label="计划开始时间"></el-table-column>
          <el-table-column prop="endTime" label="计划完成时间"></el-table-column>
          <el-table-column prop="status" label="流程状态"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
          style="display: flex;justify-content: end; margin-top:20px">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <project-initiation :row="selectedRow" :ModalType="ModalType"></project-initiation>
    </el-dialog>
  </div>
</template>

<script>
import projectInitiation from '@/views/projectInitiation/components/projectInitiation'

export default {
  name: 'projectApproval',
  components:{projectInitiation},
  data(){
    return{
      tableData: [
        {
          date: '2024-06-14',
          entryName: '风光一体化防沙治沙',
          entryNumber:'KYXM20220015',
          entryType: '防沙治沙',
          responsiblePerson: '张三',
          startTime:'2024-06-01',
          endTime:'2024-12-31',
          status:'未结束'
        },
        {
          date: '2024-06-14',
          depart: '申报部门',
          entryName: '三北六期',
          entryNumber:'KYXM20220016',
          entryType: '植树造林',
          responsiblePerson: '张三',
          startTime:'2024-06-01',
          endTime:'2024-12-31',
          status:'未结束'
        },
        {
          date: '2022-06-14',
          depart: '申报部门',
          entryName: '蚂蚁森林',
          entryNumber:'KYXM20220017',
          entryType: '绿化改造',
          responsiblePerson: '张三',
          startTime:'2024-06-01',
          endTime:'2024-12-31',
          status:'已结束'
        },
        {
          date: '2022-03-14',
          depart: '申报部门',
          entryName: '蓝旗机器人造林',
          entryNumber:'KYXM20220018',
          entryType: '机器人造林',
          responsiblePerson: '张三',
          startTime:'2022-06-01',
          endTime:'2022-12-31',
          status:'已终止'
        }
      ],
      currentPage:1,
      dialogVisible:false,
      ModalType:'',
      selectedRow:{}
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    showModalPage(){
      this.ModalType='add'
      this.selectedRow ={}
      this.dialogVisible=true
    },
    handleRowClick(row, column, event){
      this.ModalType='edit'
      this.selectedRow = row;
      this.dialogVisible = true;
    }

  }
}
</script>

<style scoped lang="scss">
.intentional-card {
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  border: 1px solid #e7eff3;
  box-shadow: 0 0 5px #dde9ef;
  width: 100%;
  color: #555;
  background-color: #fff;
  margin: 10px 6px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    padding: 10px;
    border-bottom: 1px solid #e7eff3;

    .cap-title {
      color: #11A983;
      border-bottom: 2px solid #11A983;
      cursor: pointer;
      margin: 0 10px 0 0;
    }
  }

  .card-row-container {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 31px 27px;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    box-sizing: border-box;
    flex-wrap: nowrap;

    .left-icon {
      height: 100%;
      width: 76px;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border-radius: 3px 0px 0px 3px;
    }

    .bg-blue {
      background-color: #11A983;
      border: 1px solid #11A983;
    }

    .rightTitle {
      width: calc(100% - 76px);
      height: 100%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-line-pack: center;
      align-content: center;

      .mainTitle {
        height: 22px;
        width: 100%;
        margin-bottom: 5px;
        padding: 0 14px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #000;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .subTitle {
        height: 17px;
        width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 17px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .card-table {
    padding: 31px 27px;
    height: 100%;
  }
}
.page-img{
  width: 100%;
}
</style>
